@import url("~@/assets/css/animation.css");

.disCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.colCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aCenter {
    display: flex;
    align-items: center;
}

.sCenter {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hiden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.btn {
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: background-color 0.3s linear, border 0.3s linear;
    width: 98px;
    height: 32px;
    background-color: #70d182;
    box-shadow: 0px 2px 0px 0px #54a764;
    border-radius: 2px;
    color: #ffffff;
    font-family: Helvetica;
    font-size: 12px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    background-color: #54a764;
    box-shadow: 0px 2px 0px 0px #396f41;
}

.clcikClass {
    box-shadow: 0px 1px 0px 0px #396f41 !important;
}

.whiteBtn {
    background-color: #ffffff;
    border-radius: 2px;
    border: solid 1px #70d182;
    border-bottom: none;
    color: #70d182;
}

.whiteBtn:hover {
    background-color: #ffffff;
    border: solid 1px #6cb37a;
    border-bottom: none;
    box-shadow: 0px 2px 0px 0px #396f41;
}


.tpLink:hover {
    cursor: pointer;
    -webkit-animation: font-tpLink 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: font-tpLink 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.mask {
    backdrop-filter: blur(2px);
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.71);
}

.alink:hover {
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.maskEnter-enter-active,
.maskEnter-leave-active {
    -webkit-animation: fade-in 0.5s forwards;
    animation: fade-in 0.5s forwards;
}

.maskLeave-enter-active,
.maskLeave-leave-active {
    -webkit-animation: fade-out 0.5s ease-out forwards;
    animation: fade-out 0.5s ease-out forwards;
}

.blink {
    -webkit-animation: blink 0.9s both;
    animation: blink 0.9s both;
}

.cardLine {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #70d182;
}


.cardLineEnter-enter-active,
.cardLineEnter-leave-active {
    -webkit-animation: cardLine-in 0.75s forwards;
    animation: cardLine-in 0.75s forwards;
}

.cardLineLeave-enter-active,
.cardLineLeave-leave-active {
    -webkit-animation: cardLine-out 0.75s ease-out forwards;
    animation: cardLine-out 0.75s ease-out forwards;
}

/* 左边标签划入 */
.leftPathEnter-enter-active,
.leftPathEnter-leave-active {
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* 左边标签划出 */
.leftPathLeave-enter-active,
.leftPathLeave-leave-active {
    -webkit-animation: slide-out-left 0.75s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-left 0.75s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* 卡片从底部飞入 */
.contentEnterBottom-enter-active,
.contentEnterBottom-leave-active {
    -webkit-animation: card-in-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: card-in-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* 卡片从底部飞出 */
.contentLeaveBottom-enter-active,
.contentLeaveBottom-leave-active {
    -webkit-animation: card-out-bottom 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: card-out-bottom 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/* 卡片从头部飞出 */
.contentLeaveTop-enter-active,
.contentLeaveTop-leave-active {
    -webkit-animation: card-out-top 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: card-out-top 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/* 卡片正向翻转1 */
.contentEnterRotate-enter-active,
.contentEnterRotate-leave-active {
    -webkit-animation: card-rotate-font 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: card-rotate-font 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* 卡片反向翻转 */
.contentLeaveRotate-enter-active,
.contentLeaveRotate-leave-active {
    -webkit-animation: card-rotate-back 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: card-rotate-back 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}